import {WeatherMap} from "@/config/constant/BgMap";
import eventBus from "@/util/eventBus";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      bgImage: WeatherMap.morning.bg,
      timer: null
    }
  },
  created() {
    this.startGetDayState();
  },

  beforeDestroy() {
    clearInterval(this.timer);
  },

  methods: {
    ...mapMutations(['setBgImage']),
    startGetDayState() {
      this.getDayState();
      let gap = 60 * 60 * 1000;
      this.timer = setInterval(() => {
        this.getDayState();
      }, gap);
    },
    getDayState() {
      let h = new Date().getHours();
      let topPosition = 0;
      if (h < 9 && h > 5) {
        this.bgImage = WeatherMap.dawn.bg;
      } else if (h < 11 && h >= 9) {
        this.bgImage = WeatherMap.morning.bg;
      } else if (h < 14 && h >= 11) {
        this.bgImage = WeatherMap.noon.bg;
      } else if (h < 18 && h >= 14) {
        this.bgImage = WeatherMap.afternoon.bg;
      } else if (h < 20 && h >= 18) {
        this.bgImage = WeatherMap.dusk.bg;
        topPosition = 40;
      } else if (h >= 20) {
        this.bgImage = WeatherMap.evening.bg;
      } else {
        this.bgImage = WeatherMap.morning.bg;
        // this.bgImage = WeatherTypeBgMap.rainy;
      }
      // this.bgImage = WeatherMap.rainy.bg;
      this.setBgImage(this.bgImage);

      console.log('store', this.$store);
      
      // document.body.style.backgroundImage = this.bgImage;
      eventBus.$emit('changeTopPosition', {topPosition});
    }
  },
}
